<%--
  Created by IntelliJ IDEA.
  User: JiangMingda
  Date: 2022/8/17
  Time: 17:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>商品使用情况</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/js/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<%-- 初始化容器--%>
<div id="pieGoods" style="width: 1080px;height: 600px"></div>
<script>
    $(document).ready(function() {
        // 初始化容器
        var pie = echarts.init(document.getElementById("pieGoods"))
        //数据加载完之前先显示一段简单的loading动画
        pie.showLoading();
        // 发送一个ajax请求
        $.ajax({
            url:"${pageContext.request.contextPath}/goods/goodsVisual",
            dataType:"json",
            type:"get",
            success:function (result) {
                pie.hideLoading();    //隐藏加载动画
                // 样式
                option = {
                    title: {
                        text: '商品销售分析',
                        left: 'center'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: [60, 210],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 5
                            },
                            data: result.obj
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表
                pie.setOption(option);
            },error:function () {
                alert("饼图服务器错误");
                pie.hideLoading();
            }
        })
    })
</script>
</body>
</html>
